<html><head><base href="">
  <style class="fcc-hide-header">
    head *, title, meta, link, script {
      display: none !important;
    }
  </style>
  <script>
    window.__frameId = 'fcc-project-preview-frame';
    window.onerror = function(msg) {
      const string = msg.toLowerCase();
      if (string.includes('script error')) {
        msg = 'Build error, open your browser console to learn more.';
      }
      console.log(msg);
      return true;
    };
    document.addEventListener('click', function(e) {
      let element = e.target;
      while(element && element.nodeName !== 'A') {
        element = element.parentElement;
      }
      if (element && element.nodeName === 'A' && new URL(element.href).hash === '') {
        e.preventDefault();
        window.parent.window.alert(
            i18nContent.t('misc.iframe-alert', { externalLink: element.href })
        )
      }
      if (element) {
        const href = element.getAttribute('href');
        if (!href || href[0] !== '#' && !href.match(/^https?:\/\//)) {
          e.preventDefault();
        }
        else if (href.match(/^#.+/)) {
          e.preventDefault();
          const scrollId = href.substring(1);
          window.location.hash = scrollId;
        }
      }
    }, false);
    document.addEventListener('submit', function(e) {
      const action = e.target.getAttribute('action');
      e.preventDefault();
      if (action && action.match(/https?:\/\//)) {
        window.parent.window.alert(
            i18nContent.t('misc.iframe-form-submit-alert', { externalLink: action  })
        )
      }
    }, false);
  </script>
  <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/png" href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"><title>Palindrome Checker</title><link rel="stylesheet" data-href="styles.css"><style class="fcc-injected-styles">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    background-color: #0a0a23;
    color: #ffffff;
  }

  .container {
    width: 100%;
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .freecodecamp-logo {
    height: 30px;
    margin-bottom: 20px;
  }

  .title {
    text-align: center;
    padding: 10px 0;
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .palindrome-div {
    width: min(100vw, 450px);
    min-height: 100px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    margin: 10px 0;
    background-color: white;
    box-shadow: 0 6px 6px #002ead;
  }

  label {
    color: #0a0a23;
    margin-bottom: 20px;
  }

  .palindrome-btn {
    width: 90px;
    border: none;
    padding: 10px;
    border-radius: 15px;
    background-color: #5a01a7;
    color: #fff;
    cursor: pointer;
  }

  .palindrome-input {
    height: 30px;
    width: 250px;
    text-align: center;
    font-size: 1.2rem;
    margin: 10px;
    border: none;
    border-bottom: 2px solid #5a01a7;
  }

  .palindrome-input:focus {
    border-bottom: 3px solid #5a01a7;
  }

  .palindrome-input::placeholder {
    text-align: center;
  }

  .user-input {
    font-size: 1.4rem;
    margin-top: 10px;
    text-align: center;
  }

  .results-div {
    overflow-y: auto;
    word-wrap: break-word;
    min-height: 50px;
    color: black;
  }

  .hidden {
    display: none;
  }

  .palindrome-definition-div {
    width: min(100vw, 450px);
    font-size: 1.3rem;
    min-height: 140px;
    background-color: #00471b;
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .palindrome-definition {
    vertical-align: middle;
    text-align: center;
  }</style></head>







<body>
<main class="container">
  <img class="freecodecamp-logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo">
  <h1 class="title">Is it a Palindrome?</h1>
  <div class="palindrome-div">
    <label for="text-input">Enter in text to check for a palindrome:
    </label>
    <input class="palindrome-input" id="text-input" value="" type="text">
    <button class="palindrome-btn" id="check-btn">Check</button>
    <div class="results-div hidden" id="result"></div>
  </div>
  <div class="palindrome-definition-div">
    <p class="palindrome-definition">
      <span role="img" aria-label="light-bulb">💡</span>
      A <dfn>palindrome</dfn> is a word or sentence that's spelled the same
      way both forward and backward, ignoring punctuation, case, and
      spacing.
    </p>
  </div>
</main>
<script data-src="script.js">"use strict";"use strict";

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
var userInput = document.getElementById("text-input");
var checkPalindromeBtn = document.getElementById("check-btn");
var resultDiv = document.getElementById("result");
var _LPC4 = 1;
var _LP4 = Date.now();
var checkForPalindrome = function checkForPalindrome(input) {
  if (_LPC4++ % 2000 === 0 && Date.now() - _LP4 > 1500) {
    (function (e) {
      console.log("Potential infinite loop detected on line ".concat(e, ". Tests may be failing because of this."));
    })(5, 0);
    return;
  }
  var originalInput = input; // Store for later output

  if (input === "") {
    alert("Please input a value");
    return;
  }

  // Remove the previous result
  resultDiv.replaceChildren();
  var lowerCaseStr = input.replace(/[^A-Za-z0-9]/gi, "").toLowerCase();
  var resultMsg = "<strong>".concat(originalInput, "</strong> ").concat(lowerCaseStr === _toConsumableArray(lowerCaseStr).reverse().join("") ? "is" : "is not", " a palindrome.");
  var pTag = document.createElement("p");
  pTag.className = "user-input";
  pTag.innerHTML = resultMsg;
  resultDiv.appendChild(pTag);

  // Show the result.
  resultDiv.classList.remove("hidden");
};
checkPalindromeBtn.addEventListener("click", function () {
  checkForPalindrome(userInput.value);
  userInput.value = "";
});
userInput.addEventListener("keydown", function (e) {
  if (e.key === "Enter") {
    checkForPalindrome(userInput.value);
    userInput.value = "";
  }
});"use strict";</script>

</body></html>